<template>
    <section class="SuccessfulCases-box">
        <app-header></app-header>

        <!--背景图-->
        <article class="bg-box">
            <div class="inside">
                <div class="container">
                    <h3>Successful Cases</h3>
                    <h4>
                        <p class="clearfix">
                            <i class="iconfont icon-presentationbus"></i> 成功案例
                        </p>
                    </h4>
                </div>
            </div>
        </article>

        <!--居中内容-->
        <div class="content">
            <div class="container">
                <a-row class="clearfix company-Introduction" :gutter="48">
                    <a-col  :xs="24" :sm="44" :md="12" :lg="12" :xl="12">
                        <h3>
                            <p class="clearfix">
                                <i class="iconfont icon-weibiaoti5"></i> 我们的经验
                            </p>
                        </h3>
                        <p>华美优胜（北京）国际投资咨询有限公司拥有专业的投资顾问团队，可以根据客户不同的需求提供量身定制的房产投资规划和建议，为每位客户设计可行、安全、经济、便捷的美国房产投资方案。</p>
                        <p>自华美优胜从美国转战中国，登陆中国市场以来，成交的案例数百例，为了让客户买的更放心，住的更舒心，投资的更安心，我们特此为大家选取一些成功案例分享不同客户的买房故事。</p>
                    </a-col>
                    <a-col :xs="24" :sm="44" :md="12" :lg="12" :xl="12">
                        <h3>
                            <p class="clearfix">
                                <i class="iconfont icon-shujutongji"></i> 服务客户
                            </p>
                        </h3>
                        <a-row class="clearfix" :gutter="40">
                            <a-col :xs="24" :sm="44" :md="8" :lg="8" :xl="8">
                                <h3>9y</h3>
                                <span>服务年数</span>
                            </a-col>
                            <a-col :xs="24" :sm="44" :md="8" :lg="8" :xl="8">
                                <h3>9w+</h3>
                                <span>服务人数</span>
                            </a-col>
                            <a-col :xs="24" :sm="44" :md="8" :lg="8" :xl="8">
                                <h3>1k+</h3>
                                <span>成功人数</span>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
                <a-row :gutter="40" class="main-content">
                    <a-col :xs="24" :sm="44" :md="16" :lg="16" :xl="16" class="left-box">
                        <div class="inside">
                            <header class="clearfix">
                                <span>成功案例</span>
                            </header>
                            <a-row class="ul" :gutter="32" v-show="!noDataShow">
                                <a-col :xs="24" :sm="44" :md="12" :lg="12" :xl="12" class="li" v-for="(item, index) in SuccessfulCasesData" :key="index">
                                    <a-card :title="null" hoverable :loading="SuccessfulCasesLoading">
                                        <router-link :to="{path: '/SuccessfulCasesDetails', query: {SuccessfulCasesId: item.id}}">
                                            <img v-lazy="item.photo" :title="item.title" :alt="item.title" width="100%"/>
                                        </router-link>
                                        <article>
                                            <a @click.stop.prevent="goSuccessfulCasesDetails(item.id)" class="webkit-text-overflow-1lines">{{isNull0(item.title)}}</a>
                                            <p class="webkit-text-overflow-3lines">{{isNull0(item.description)}}</p>
                                            <p class="clearfix">
                                            <span class="left">
                                                <i class="iconfont icon-fabushijian"></i>{{momentFormat(item.createTime, 'YYYY-MM-DD')}}
                                            </span>
                                            </p>
                                        </article>
                                    </a-card>
                                </a-col>
                            </a-row>
                            <div class="Pagination" style="text-align: center; margin: 30px 0 0 0;" v-show="!noDataShow">
                                <a-pagination
                                        :showTotal="total => `共 ${total} 条`"
                                        showQuickJumper
                                        showSizeChanger
                                        :current="pageNumber"
                                        :pageSize="pageSize"
                                        :total="total"
                                        @change="pageNumberChange"
                                        @showSizeChange="pageSizeChange"/>
                            </div>
                            <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
                        </div>
                        <!--展会活动报名框-->
                        <exhibitionsignUp></exhibitionsignUp>
                    </a-col>
                    <!--公共页面主体的右侧内容-->
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-box">
                        <rightList :msgType="5"></rightList>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import exhibitionsignUp from '../../components/exhibitionsignUp.vue';//公共组件——展会活动报名框
    import rightList from '../../components/rightList.vue';//公共组件——页面主体的右侧内容
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                SuccessfulCasesData: [], //成功案例数据
                pageNumber: 1,  //默认显示第一页
                pageSize: 10,   //默认每页显示10条
                total: 0,    //总条数
                SuccessfulCasesLoading: true,    //列表加载loading
                noDataShow: false,  //成功案例数据——没有数据提示信息是否显示
            }
        },
        metaInfo () {
            return {
                title: '成功案例_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '华美优胜成功案例，华美优胜投资案例，美国房产投资案例，美国房产成功案例' },
                    { vmid: 'description', name: 'description', content: '华美优胜（北京）国际投资咨询有限公司拥有专业的投资顾问团队，可以根据客户不同的需求提供量身定制的房产投资规划和建议，为每位客户设计可行、安全、经济、便捷的美国房产投资方案。' },

                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取成功案例列表
            this.getSuccessfulCasesData();
        },
        methods: {
            //处理currentPage当前页变动的事件
            pageNumberChange(page, pageSize) {
                this.pageNumber = page;
                this.SuccessfulCasesLoading = true;
                this.getSuccessfulCasesData();
            },
            //处理pagesize页码大小变动的事件
            pageSizeChange(current, size) {
                this.pageNumber = 1;
                this.pageSize = size;
                this.SuccessfulCasesLoading = true;
                this.getSuccessfulCasesData();
            },
            //获取成功案例列表数据
            getSuccessfulCasesData() {
                this.$get(`/case/list/${this.pageNumber}/${this.pageSize}`).then(res => {
                    this.SuccessfulCasesLoading = false;
                    if (res.status === 0) {
                        this.SuccessfulCasesData = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }
                })
            },
            //跳转到成功案例详情页
            goSuccessfulCasesDetails(SuccessfulCasesId) {
                this.$router.push({ path: "/SuccessfulCasesDetails", query: { SuccessfulCasesId: SuccessfulCasesId } });
            },
        },
        components: {
            'app-header': Header,//公共组件——头部
            exhibitionsignUp,//公共组件——展会活动报名框
            rightList,//公共组件——页面主体的右侧内容
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        background: #f5f5f5;
        .SuccessfulCases-box {
            //背景图
            .bg-box {
                background: url(/static/img/ConsultantTeam3.jpg) no-repeat center center;
                background-size: cover;
                padding: 0 !important;
                >.inside {
                    background: rgba(15, 40, 54, 0.6);
                    >.container {
                        padding: 200px 0;
                        text-align: center;
                        >h3 {
                            font-size: 35px;
                            font-family: 'HelveticaNeue-UltraLight', "PingFang SC", 'Microsoft Yahei', Arial, Verdana, sans-serif;
                            font-weight: 100;
                            color: #fff;
                        }
                        >h4 {
                            line-height: 35px;
                            font-size: 30px;
                            padding: 20px 0 30px 0;
                            color: #fff;
                            >p {
                                display: inline-block;
                                >i {
                                    font-size: 35px;
                                    color: #3cd0c5;
                                    float: left;
                                    margin: 0 10px 0 0;
                                }
                            }
                        }
                    }
                }
            }

            .content {
                padding: 30px 0;
                > .container {
                    /*我们的经验*/
                    >.company-Introduction{
                        margin: 30px 0;
                        >div{
                            >h3{
                                text-align: left;
                                margin: 0 0 50px 0;
                                line-height: 35px;
                                font-size: 30px;
                                padding: 20px 0 30px 0;
                                > p {
                                    display: inline-block;
                                    > i {
                                        font-size: 35px;
                                        color: #3cd0c5;
                                        float: left;
                                        margin: 0 10px 0 0;
                                    }
                                }
                            }
                        }
                        >div:first-of-type{
                            >p{
                                font-size: 16px;
                                line-height: 30px;
                                margin: 15px 0;
                            }
                        }
                        >div:last-of-type{
                            >h3{
                                /*text-indent: 1em;*/
                                line-height: 35px;
                                font-size: 30px;
                                padding: 20px 0 30px 0;
                                > p {
                                    display: inline-block;
                                    > i {
                                        font-size: 35px;
                                        color: #3cd0c5;
                                        float: left;
                                        margin: -3px 10px 0 0;
                                    }
                                }
                            }
                            >div{
                                >div{
                                    text-align: center;
                                    margin: 50px 0 0 0;
                                    >h3{
                                        font-size: 50px;
                                        font-weight: bold;
                                        color: #3c3e45;
                                    }
                                    >span{
                                        display: inline-block;
                                        padding: 5px 20px;
                                        background: #3b8bed;
                                        border-radius: 5px;
                                        color: #fff;
                                        margin: 20px 0 0 0;
                                    }
                                }
                            }
                        }
                    }
                    .main-content {
                        /*成功案例列表*/
                        > .left-box {
                            padding: 0;
                            > .inside {
                                > header {
                                    line-height: 36px;
                                    border-bottom: 3px solid #00b8ee;
                                    > span {
                                        font-size: 18px;
                                        font-weight: bold;
                                    }
                                    > a {
                                        float: right;
                                    }
                                }
                                > .ul {
                                    > .li {
                                        margin: 30px 0;
                                        .ant-card-body {
                                            padding: 0;
                                            > a {
                                                display: block;
                                                overflow: hidden;
                                                > img {
                                                    width: 100%;
                                                    height: 250px;
                                                    vertical-align: top;
                                                    -webkit-transition: all linear 1s;
                                                    -moz-transition: all linear 1s;
                                                    transition: all linear 1s;
                                                }
                                            }
                                            > article {
                                                background: #fff;
                                                padding: 20px;
                                                border-top: none;
                                                -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                > a {
                                                    font-size: 18px;
                                                    font-weight: bold;
                                                    color: #38485a;
                                                    margin: 5px 0;
                                                    cursor: pointer;
                                                    -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                }
                                                > a:hover {
                                                    color: #00b8ee;
                                                }
                                                > p {
                                                    margin: 15px 0 0 0;
                                                    font-size: 15px;
                                                    >span{
                                                        >i{
                                                            margin: 0 10px 0 0;
                                                        }
                                                    }
                                                }
                                                > p:first-of-type {
                                                    min-height: 70px;
                                                }
                                            }
                                        }
                                    }
                                    >.li:hover {
                                        .ant-card-body {
                                            >a {
                                                > img {
                                                    -webkit-transform: scale(1.1, 1.1);
                                                    -moz-transform: scale(1.1, 1.1);
                                                    transform: scale(1.1, 1.1);
                                                }
                                            }
                                            >article {
                                                box-shadow: 0 0 12px rgba(136, 136, 136, .3);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        /* 右侧列表——广告轮播位，推荐房源，热门资讯，客户留言 */
                        > .right-box {
                            > .inside {
                                background: #fff;
                                padding: 15px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
